
<template>
  <div >
    <div class="headWrap">
      <div class="content_title">直播详情</div>
    </div>
    <div >
      <el-collapse>
        <el-collapse-item title="导播" name="1">
          <el-row>
            <el-col :span="12">
              <div ><video src=""></video>视频</div>
            </el-col>
            <el-col :span="12">
              <div>
                <el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="标题" prop="name">
                    <el-input  :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="地理位置" prop="name">
                    <el-input  :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="直播已用时:" prop="name">
                    <el-input  :readonly="true"></el-input>
                  </el-form-item>
                  <el-form-item label="重置直播" prop="name">
                    <el-button :plain="true" type="warning">重置直播</el-button>
                  </el-form-item>
                  <el-form-item label="" prop="name">
                    <el-button :plain="true" type="warning">观看直播</el-button>
                    <el-button :plain="true" type="warning">停止收录</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <hr/>
          <el-row>
            <el-col :span="12">
              <div class="title">导播语推送</div>
              <el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择" prop="name">
                  <el-radio v-model="radio" label="1">倒计时</el-radio>
                  <el-radio v-model="radio" label="2">普通</el-radio>
                </el-form-item>
                <el-form-item label="秒数" prop="name">
                  <el-select placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="" prop="name">
                  <template>
                    <el-button  type="info">发送</el-button>
                  </template>
                </el-form-item>


              </el-form>
            </el-col>
            <el-col :span="12">
              <h3></h3>
              <el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="提示默认语" prop="name">
                  <el-select placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="话语" prop="name">
                  <el-input  :readonly="true"></el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="推流" name="2">
          <span>推送到第三方</span>
          <el-button  type="info">添加推送方</el-button>
        </el-collapse-item>
        <el-collapse-item title="直播流地址查询" name="3">
          <el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="直播流地址(延时60秒)" prop="name">
              <div> 111</div>
            </el-form-item>
            <el-form-item label="监控地址(延时5秒)" prop="name">
              <div> 333</div>
            </el-form-item>
            <el-form-item label="视频推送地址: 仅供手机或者二次推送使用" prop="name">

            </el-form-item>
            <el-form-item label="H5直播地址" prop="name">

            </el-form-item>


          </el-form>
        </el-collapse-item>
        <el-collapse-item title="视频切片" name="4">
        </el-collapse-item>
      </el-collapse>
      <!--<el-tabs type="border-card" v-model="activeName" @click="handleClick">-->
        <!--<el-tab-pane label="导播" name="0">-->
          <!--<el-row>-->
            <!--<el-col :span="12">-->
              <!--<div ><video src=""></video>视频</div>-->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
              <!--<div>-->
                <!--<el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
                  <!--<el-form-item label="标题" prop="name">-->
                    <!--<el-input  :readonly="true"></el-input>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="地理位置" prop="name">-->
                    <!--<el-input  :readonly="true"></el-input>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="直播已用时:" prop="name">-->
                    <!--<el-input  :readonly="true"></el-input>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="重置直播" prop="name">-->
                    <!--<el-button :plain="true" type="warning">重置直播</el-button>-->
                  <!--</el-form-item>-->
                  <!--<el-form-item label="" prop="name">-->
                    <!--<el-button :plain="true" type="warning">观看直播</el-button>-->
                    <!--<el-button :plain="true" type="warning">停止收录</el-button>-->
                  <!--</el-form-item>-->
                <!--</el-form>-->
              <!--</div>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <!--<hr/>-->
          <!--<el-row>-->
            <!--<el-col :span="12">-->
              <!--<div class="title">导播语推送</div>-->
              <!--<el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
                <!--<el-form-item label="选择" prop="name">-->
                  <!--<el-radio v-model="radio" label="1">倒计时</el-radio>-->
                  <!--<el-radio v-model="radio" label="2">普通</el-radio>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="秒数" prop="name">-->
                  <!--<el-select placeholder="请选择">-->
                    <!--<el-option-->
                      <!--v-for="item in options"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="" prop="name">-->
                  <!--<template>-->
                    <!--<el-button  type="info">发送</el-button>-->
                  <!--</template>-->
                <!--</el-form-item>-->


              <!--</el-form>-->
            <!--</el-col>-->
            <!--<el-col :span="12">-->
              <!--<h3></h3>-->
              <!--<el-form   ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
                <!--<el-form-item label="提示默认语" prop="name">-->
                  <!--<el-select placeholder="请选择">-->
                    <!--<el-option-->
                      <!--v-for="item in options"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
                <!--<el-form-item label="话语" prop="name">-->
                  <!--<el-input  :readonly="true"></el-input>-->
                <!--</el-form-item>-->
              <!--</el-form>-->
            <!--</el-col>-->
          <!--</el-row>-->
        <!--</el-tab-pane>-->
      <!--</el-tabs>-->

      <!--<el-tabs type="border-card" v-model="activeName" @click="handleClick">-->
        <!--<el-tab-pane label="推流" name="0">-->
          <!--<span>推送到第三方</span>-->
          <!--<el-button  type="info">添加推送方</el-button>-->
        <!--</el-tab-pane>-->
      <!--</el-tabs>-->

      <!--<el-tabs type="border-card" v-model="activeName" @click="handleClick">-->
        <!--<el-tab-pane label="直播地址查询" name="0"></el-tab-pane>-->
      <!--</el-tabs>-->
      <!--<el-tabs type="border-card" v-model="activeName" @click="handleClick">-->
        <!--<el-tab-pane label="视频切片" name="0"></el-tab-pane>-->
      <!--</el-tabs>-->

    </div>
  </div>
</template>


<script>
  export default {
    data () {
      return {
        tableData: [],
        activeName: '0',
        radio: '1',
        options: []
      };
    },
    methods: {
      // 关键字搜索
      searchByWord () {
        alert('关键字搜索');
      },
      // 切换tab页签
      handleClick (tab, event) {
        this.activeName = tab.name;
        alert('切换Tab页签');
      },
      // 查看详情
      detail () {
        this.$router.push('/liveManager/liveDetail');
        alert('查看详情');
      }
    },
    created: function () {
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{
    height: 20px;
    font-weight: 400;
    font-size: 20px;
  }

</style>
